import React, {Component} from 'react'
import { Card } from 'antd';
import PubSub from 'pubsub-js'
import Avatar from "./Avatar";
import {addOneSailor} from "../../api/sailor"
import {createFormData} from "../../utils/creatFormData"
import './index.scss'
import {
  Form,
  Input,
  Button,
  Radio,
  Select,
  Cascader,
  DatePicker,
  InputNumber,
  TreeSelect,
  Switch,
} from 'antd';
import {setToken} from "../../utils/session";
import { PlusOutlined,EditOutlined,DeleteOutlined,DownloadOutlined,PlaySquareOutlined,SearchOutlined,FileAddOutlined  } from '@ant-design/icons';

export default class addS extends Component {
  onFinish=(value)=>{
    value.sailorPhoto=this.img
    let sailorData={}
    // console.log(value)
    if(value.sailorName && value.enSailorName && value.occupation && value.phoneNumber && value.sailorPhoto){
      sailorData.chinese_name=value.sailorName
      sailorData.english_name=value.enSailorName
      sailorData.position=value.occupation
      sailorData.phone_number= value.phoneNumber
      sailorData.file=value.sailorPhoto
      addOneSailor(createFormData(sailorData)).then(response => {
        // // console.log(response.data);
        // const {access_token} = response.data
        // // console.log(token_type,access_token);
        // //储存token
        // setToken(access_token);
        // this.props.history.push('/index');
        alert("添加船员成功")
      }).catch(error => {
        // console.log('dskfs')
        alert("添加船员失败\n\n可能是该船员已经存在")
      })
      // console.log('Received values of form: ', values);
    }
    else {
      alert("您的信息填写不完整")
    }
  }
  // getImgURL=(value)=>{
  //   return value
  // }
  componentDidMount(){
    this.token=PubSub.subscribe("Img",(msg,data)=> {
      // 订阅的频道一发布消息，就调用此回调函数
      this.img=data
      this.setState(data)
      // console.log(this.imgURL)
      // console.log(msg,data)
    })
  }

  componentWillUnmount(){
    PubSub.unsubscribe(this.token)
  }

  render() {
    const formItemLayout = {
      labelCol: { span: 2 },
      wrapperCol: { span: 8},
    };
    const formTailLayout = {
        labelCol: {
          span: 4,
        },
        wrapperCol: {
          span: 8,
          offset: 0,
        },
    };
    const layout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
      return (
          <div className="styleOBJ">
              
            
            {/* <p>请完整输入如下信息</p> */}
            <Form
              onFinish={this.onFinish}
            >
              <p style={{left:'20vh',top:'2vh',position:'absolute',}}>【填写信息】提交的图片必须是含人脸的图片！</p>
              <Form.Item {...formItemLayout} label="中文名" name="sailorName">
                <Input />
              </Form.Item>
              <Form.Item {...formItemLayout} label="英文名" name="enSailorName">
                <Input />
              </Form.Item>
              <Form.Item {...formItemLayout}  label="职业" name="occupation">
                <Select>
                  <Select.Option value="sailor">水手</Select.Option>
                </Select>
              </Form.Item>
              <Form.Item {...formItemLayout} label="电话号码" name="phoneNumber">
                <Input />
              </Form.Item>
              <Form.Item {...formItemLayout} label="船员照片" name="sailorPhoto">
                <Avatar/>
                {/*您只能上传jpg/jpeg和png的图片*/}
              </Form.Item>
              <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 2 }}>
                <Button htmlType="submit" type="primary"  icons={<PlusOutlined/>}>添加</Button>
                {/* <br/>
                <br/>
                // <br/>
                <br/> */}
                {/* <Button type="primary" htmlType="submit" icon={<PlusOutlined />}> 添加 </Button> */}
                <br/>
                <br/>
                <Button  type="default"  icons={<PlusOutlined/>}>批量添加</Button>
              </Form.Item>
            </Form>
          </div>
      )
  }
}
